<div class="x_panel">
    <div class="x_title">
        <h2>菜单管理/
            <small>修改</small>
        </h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br/>
        <form id="defaultForm" data-parsley-validate="" class="form-horizontal form-label-left" novalidate="">
            <input type="hidden" name="menuId" th:value="${cgMenu.menuId}"/>
            <input type="hidden" name="menuUrl" th:value="${cgMenu.menuUrl}"/>
            <input type="hidden" name="level" th:value="${cgMenu.level}"/>
            <input type="hidden" name="menuCss" th:value="${cgMenu.menuCss}"/>
            <input type="hidden" name="pMenuId" th:value="${pMenu.menuId}"/>
            <div class="form-group">
                <label class="control-label col-md-3">菜单名称</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" class="form-control col-md-7" name="menuName" th:value="${cgMenu.menuName}"/>
                </div>
            </div>
            <div class="form-group" th:if="${cgMenu.level ne '1'}">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">父级菜单名称</label>
                <div class="col-md-6 " style="position: relative;">
                    <input type="text" class="form-control" name="pMenuName" th:value="${pMenu.menuName}" readonly="readonly"/>
                    <span class="input-group-btn" style="position: absolute;right: 35px; top: 0; z-index: 100">
                              <button type="button" class="btn btn-primary" data-toggle="modal"
                                      data-target="#myModal">+</button>
                        </span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">菜单归属系统</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <select class="form-control" name="menuAttribution" id="menuAttribution">
                        <option value="">--请选择--</option>
                        <option th:selected="${cgMenu.menuAttribution eq '系统'}">系统</option>
                        <option th:selected="${cgMenu.menuAttribution eq '人口'}">人口</option>
                        <option th:selected="${cgMenu.menuAttribution eq '事件'}">事件</option>
                        <option th:selected="${cgMenu.menuAttribution eq '组织'}">组织</option>
                        <option th:selected="${cgMenu.menuAttribution eq '地理'}">地理</option>
                    </select>
                </div>
            </div>
            <!--<div class="ln_solid"></div>-->
            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">

                    <button type="button" id="validateBtn" class="btn btn-primary" >保存</button>
                    <button class="btn btn-success" onclick="backToList()" type="button">返回</button>
                </div>
            </div>

        </form>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    菜单名称
                </h4>
            </div>
            <ul id="treeDemo" class="ztree"></ul>

            <!--<div class="tree well" id="tree" style="height: 200px;overflow: scroll;z-index: 110"></div>-->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="send" onclick="send()">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<SCRIPT type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        $('form').bootstrapValidator({
            live: 'enabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                menuName: {
                    validators: {
                        notEmpty: {
                            message: '菜单名称不能为空'
                        }
                    }
                },

                menuAttribution: {
                    validators: {
                        notEmpty: {
                            message: '菜单归属系统不能为空'
                        }
                    }
                }

            }


        });
        $('#validateBtn').click(function () {
            $('form').bootstrapValidator('validate');
            var flag = $('form').data('bootstrapValidator').isValid();
            if (flag) {

                saveAndFlush()

            } else {
                return;
            }
        });
    });

    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        callback: {
            onClick: zTreeBeforeClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };
    var zNodes = eval([[${menuTree}]]);
    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                py = $("#py").attr("checked") ? "p" : "",
                sy = $("#sy").attr("checked") ? "s" : "",
                pn = $("#pn").attr("checked") ? "p" : "",
                sn = $("#sn").attr("checked") ? "s" : "",
                type = {"Y": py + sy, "N": pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>" + str + "</li>");
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
    });

    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = treeObj.getCheckedNodes(true),
                v = "";
        for (var i = 0; i < nodes.length; i++) {
            v += nodes[i].name + ",";
            alert(nodes[i].name); //获取选中节点的值

        }
    }
    ;

    function send() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = treeObj.getCheckedNodes(true),
            v = "",
            c = "";
        for (var i = 0; i < nodes.length; i++) {
            v += nodes[i].name;
            c += nodes[i].id;
        }
        if (nodes.length > 0) {//循环判断，直到找到根节点
            var node = nodes[0].getParentNode();
            var levelNum = 2;
            if(node!=null){
                levelNum+=1;
                node= node.getParentNode();
                if(node!=null){
                    levelNum+=1;
                }
            }
            $("input[name=level]").val(levelNum);
            $("input[name=pMenuId]").val(c);
            $("input[name=pMenuName]").val(v);
        }
        $("#myModal").modal("hide");
    }
    /*]]>*/
</SCRIPT>
